<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>bootstrap的form表单布局</title>
		<!---引入jquery资源--->
		<script type="text/javascript" src="../js/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
		<!--引入bootstrap的核心js资源文件--->
		<script type="text/javascript" src="../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<!--引入bootstrap的核心css资源文件--->
		<link rel="stylesheet" type="text/css" href="../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	</head>

	<body>
		<form class="form-horizontal">
			<div class="form-group">
			</div>
			<div class="form-group">
				<label for="txtName" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-3">
					<input type="email" class="form-control" id="txtName" placeholder="请输入用户名">
				</div>
				<label for="txtPsw" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="txtPsw" placeholder="请输入密码">
				</div>
			</div>
			<div class="form-group">
				<label for="txtEmail" class="col-sm-2 control-label">邮箱</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="txtEmail" placeholder="请输入邮箱">
				</div>
				<label for="txtSex" class="col-sm-2 control-label">性别</label>
				<div class="col-sm-3">
					<label class="radio-inline">
  						<input type="radio" name="txtSex" id="txtSex1" value="男"> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="txtSex" id="txtSex2" value="女"> 女
					</label>					
				</div>
			</div>
			<div class="form-group">
				<label for="txtBirthday" class="col-sm-2 control-label">出生日期</label>
				<div class="col-sm-3">
					<input type="date" class="form-control" id="txtBirthday">
				</div>
				<label for="txtHobby" class="col-sm-2 control-label">兴趣爱好</label>
				<div class="col-sm-3">
					<label class="checkbox-inline">
						<input type="checkbox" name="txtHobby" id="txtHobby" value="打游戏"> 打游戏
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" name="txtHobby" id="txtHobby" value="写代码"> 写代码
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" name="txtHobby" id="txtHobby" value="旅游"> 旅游
					</label>
				</div>
			</div>
			<div class="form-group">
				<label for="txtImg" class="col-sm-2 control-label">头像</label>
				<div class="col-sm-3">
					<input type="file" id="txtImg">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-4 col-sm-1">
					<button type="submit" class="btn btn-default">提&nbsp;&nbsp;交</button>
				</div>
				<div class="col-sm-offset-1 col-sm-1">
					<button type="submit" class="btn btn-default">取&nbsp;&nbsp;消</button>
				</div>
			</div>
		</form>
	</body>

</html>